<template>
  <div>
    <PageHeader hidden-breadcrumb>
        <template #title><div class="demo-title">表单详情</div></template>
        <template #content>
          <div class="demo-content">表单除了提交数据，有时也用于显示只读信息。</div>
        </template>
    </PageHeader>
    <Card title="基本信息" style="margin:20px;">
        <Row>
            <i-col :lg="8">
                姓名：Henry
            </i-col>
            <i-col :lg="8">
                性别：男
            </i-col>
            <i-col :lg="8">
                城市：郑州市
            </i-col>
        </Row>
        <Row>
            <i-col :lg="8">
                生日：1991-05-14
            </i-col>
            <i-col :lg="8">
                邮箱：q1@xx.xxx
            </i-col>
            <i-col :lg="8">
                地址：郑州市中原区
            </i-col>
        </Row>
    </Card>

    <Card title="其他信息" style="margin:20px;">
        <Row>
            <i-col :lg="12">
                姓名：Henry
            </i-col>
            <i-col :lg="12">
                性别：男
            </i-col>
        </Row>
        <Row>
            <i-col :lg="12">
               城市：郑州市
            </i-col>
            <i-col :lg="12">
                生日：1991-05-14
            </i-col>
        </Row>
        <Row>
            <i-col :lg="12">
                邮箱：q1@xx.xxx
            </i-col>
            <i-col :lg="12">
                地址：郑州市中原区
            </i-col>
        </Row>
    </Card>

    <Card title="表格信息" style="margin:20px;">
        <Table :columns="columns" :data="data"></Table>
    </Card>
  </div>
</template>

<script>
export default {
    data () {
        return {
            columns: [
                {
                    type: 'selection',
                    width: 60,
                    align: 'center'
                },
                {
                    title: 'Name',
                    key: 'name'
                },
                {
                    title: 'Age',
                    key: 'age'
                },
                {
                    title: 'Address',
                    key: 'address'
                }
            ],
            data: [
                {
                    name: 'John Brown',
                    age: 18,
                    address: 'New York No. 1 Lake Park'
                },
                {
                    name: 'Jim Green',
                    age: 24,
                    address: 'London No. 1 Lake Park'
                },
                {
                    name: 'Joe Black',
                    age: 30,
                    address: 'Sydney No. 1 Lake Park'
                },
                {
                    name: 'Jon Snow',
                    age: 26,
                    address: 'Ottawa No. 2 Lake Park'
                },
                {
                    name: 'Jim Green',
                    age: 24,
                    address: 'London No. 1 Lake Park'
                },
                {
                    name: 'Joe Black',
                    age: 30,
                    address: 'Sydney No. 1 Lake Park'
                },
                {
                    name: 'Jon Snow',
                    age: 26,
                    address: 'Ottawa No. 2 Lake Park'
                }
            ]
        }
    },
    methods: {
       
    }
}
</script>
